import * as React from "react"

import {
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectLabel,
   SelectTrigger,
   SelectValue,
} from "~/registry/default/ui/select"

export default function SelectDemo() {
   return (
      <Select>
         <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Select a fruit" />
         </SelectTrigger>
         <SelectContent>
            <SelectGroup>
               <SelectLabel>Fruits</SelectLabel>
               <SelectItem value="apple">Apple</SelectItem>
               <SelectItem value="banana">Banana</SelectItem>
               <SelectItem value="blueberry">Blueberry</SelectItem>
               <SelectItem value="grapes">Grapes</SelectItem>
               <SelectItem value="pineapple">Pineapple</SelectItem>
            </SelectGroup>
         </SelectContent>
      </Select>
   )
}
